<template>
	<view class="dormitort_app_box">
		<view class="app_item" v-for="(item,index) in appArr" :key="index" @click="item.fun(item)">
			<view class="dormitory_app_icon">
				<!-- <uni-badge
					class="uni-badge-left-margin" 
					text="新" 
					absolute="rightTop" :offset="[-5, -1]" 
					size="small"> -->
					<MyIcons size="60rpx" :src="joinSystemPath(item.iconName)"/>
				<!-- </uni-badge> -->
			</view>
			<view class="name text_ellipsis">
				{{item.name}}
			</view>
		</view>
		<view class="app_item" v-for="item in 2" :key="item" />
		<MyPopub itemPadding="0rpx" height="200rpx" :isOpenPopub="openSuggestPopubFlag" :slotsNums="2">
			<template #1>
				<button type="default" class="choose_wx_avatar" open-type="feedback">
					反馈与建议
				</button>
			</template>
			<template #2>
				<button type="default" class="choose_wx_avatar" open-type="contact">
					人工客服
				</button>
			</template>
		</MyPopub>
		<MyModal :openModalFlag="openSuggestlFlag" :okFun="okSuggestModalFun">
			<template #title>
				尽心塑造一个大家需要的程序
			</template>
			<template #content>
				<view>第一步：点击右上角的三个小点</view>
				<view>第二步：点击反馈与投诉</view>
				<view>第三步：提出存在bug或者合理建议</view>
			</template>
		</MyModal>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	import MyPopub from '@/components/MyPopub/MyPopub.vue'
	
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	
	import {verifyHandleEg} from '@/hooks/verify.js'
	import {
		toTimeStamp,
		isTest
	} from '@/utils/changeData.js'
	
	const props = defineProps({
		dormitoryInfo:{
			type:Object
		}
	})
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_text_color
	} = dynamicStyle_store.dormitoryStyle

	const openSuggestPopubFlag=ref(0)
	
	const inviteTestFun=()=>{
		uni.navigateTo({
			url: '/pages/Dormitory/DormitoryInvite/DormitoryInvite?dormitory_id=c5871341f0268d49482c2a021611770a',
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}
	
	//设置
	const toSet=()=>{
		verifyHandleEg()
		uni.navigateTo({
			url:'/pages/Dormitory/DormitorySet/DormitorySet?dormitory_id='
		})
	}
	
	//公告
	const toNotice=()=>{
		verifyHandleEg()
		uni.navigateTo({
			url:'/pages/Dormitory/Notice/Notice'
		})
	}
	
	//记账
	const toAddBill=()=>{
		verifyHandleEg()
		uni.navigateTo({
			url:'/pages/Dormitory/AddBill/AddBill'
		})
	}
	
	//账单列表
	const toBills=()=>{
		verifyHandleEg()
		uni.navigateTo({
			url:'/pages/Dormitory/Bills/Bills'
		})
	}
	
	//值日
	const toDutys=()=>{
		verifyHandleEg()
		const {isPauseDuty,dormitory_weekType} = props.dormitoryInfo.dormitory
		uni.navigateTo({
			url:`/pages/Dormitory/Dutys/Dutys?isPauseDuty=${isPauseDuty}&dormitoryWeekType=${dormitory_weekType}`
		})
	}
	
	//公共物品
	const toEstate=()=>{
		verifyHandleEg()
		uni.navigateTo({
			url:'/pages/Dormitory/Estates/Estates'
		})
	}
	
	//备忘录
	const toMemo=()=>{
		verifyHandleEg()
		uni.navigateTo({
			url:'/pages/Dormitory/Memos/Memos'
		})
	}
	
	//抓阄
	const toLot=()=>{
		verifyHandleEg()
		uni.navigateTo({
			url:`/pages/Dormitory/Lots/Lots?type=lot`
		})
	}
	
	//抽签
	const toRandomLots=()=>{
		verifyHandleEg()
		uni.navigateTo({
			url:`/pages/Dormitory/Lots/Lots?type=randomLots`
		})
	}
	
	//投票
	const toVotes=()=>{
		verifyHandleEg()
		uni.navigateTo({
			url:`/pages/Dormitory/Lots/Lots?type=votes`
		})
	}
	
	//更多
	const toMore=()=>{
		uni.navigateTo({
			url:'/pages/Dormitory/NewUserHelp/NewUserHelp?systemId=14'
		})
	}
	
	//提出建议
	const openSuggestlFlag=ref()
	const openSuggestModalFun=()=>{
		openSuggestPopubFlag.value=Math.random()
	}
	const okSuggestModalFun=()=>{
		openSuggestlFlag.value=-Math.random()
	}
	
	const appArr = ref([
		{
			name:"账单",
			fun:toBills,
			iconName:'bill.png'
		},
		{
			name:"记账",
			fun:toAddBill,
			iconName:'createBill.png'
		},
		{
			name:"值日",
			fun:toDutys,
			iconName:'duty.png'
		},
		{
			name:"抓阄",
			fun:toLot,
			iconName:'lot.png'
		},
		{
			name:"投票",
			fun:toVotes,
			iconName:'vote.png'
		},
		{
			name:"抽签",
			fun:toRandomLots,
			iconName:'randomLots.png'
		},
		{
			name:"公共物品",
			fun:toEstate,
			iconName:'publicEstate.png'
		},
		{
			name:"公告",
			fun:toNotice,
			iconName:'notice.png'
		},
		{
			name:"备忘录",
			fun:toMemo,
			iconName:'memo.png'
		},
		{
			name:"宿舍设置",
			fun:toSet,
			iconName:'settingDormitory.png'
		},
		{
			name:"找平台",
			fun:openSuggestModalFun,
			iconName:'suggest.png'
		},
		{
			name:"使用指南",
			fun:toMore,
			iconName:'newUserHelp.png'
		}
	])
	
	onShow(()=>{

	})
	
</script>

<style lang="less">
	.text_ellipsis{
		white-space:nowrap;
		text-overflow:ellipsis;
		overflow: hidden;
	}
	.dormitort_app_box{
		width: 100%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		font-size: 30rpx;
		color: v-bind(primary_text_color);
		.app_item{
			width: 20%;
			margin: 4%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.name{
				width: 100%;
				text-align: center;
			}
		}
		.choose_wx_avatar{
			margin: 0 !important;
			width: 100%;
			height: 100rpx;
			background-color: #FFFFFF !important;
			border: 0px solid #FFFFFF !important;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: v-bind(primary_text_color) !important;
		}
		button::after {
		   border: none;
		}
	}
</style>